import React, { useState } from 'react';
import { useDelStudentMutation, useGetStudentByIdQuery, useGetStudentsQuery } from './studentApi';

export default function App() {
  // 调用Api查询数据
  const [stuId, setId] = useState(1);
  const { data: idData } = useGetStudentByIdQuery(stuId, {
    // 可以接受一个对象作为第二个参数，该对象对请求进行配置
    selectFromResult: res => {
      return res
    },// 返回结果格式
    pollingInterval: 0,// 设置轮询间隔，单位毫秒，为0则表示不轮询,每隔xxx毫秒发送一次请求
    skip: false,// 是否跳过当前请求，默认false，不跳过该请求
    refetchOnMountOrArgChange: false, // 设置是否每次都重新加载数据，可以设置数字表示有效期时间，单位秒，如2，表示2秒，true每次都重新加载
    refetchOnFocus: false, // 是否在重新获取焦点时重新加载数据，比如离开当前网页，又点击当前网页时，需要在store中提供支持，setupListener
    refetchOnReconnect: false,// 网络重连时
  });
  const { data, isSuccess, isLoading } = useGetStudentsQuery(); // 调用Api中的钩子查询数据
  console.log(data)
  console.log(idData)

  // 删除钩子，useMutation返回一个数组
  // 数组中第一个为触发器，第二个是结果集
  const [delStudent, { isSuccess: delSuccess }] = useDelStudentMutation();
  const delHandler = (id) => {
    delStudent(id)
  };
  const getStudentById = (id) => {
    setId(id)
    console.log(id, stuId)
  }
  return (
    <div>
      {isLoading && <p>数据加载中...</p>}
      {
        isSuccess && data.map(item =>
          <p key={item.id}>
            {item.attributes.name} --
            {item.attributes.age} --
            {item.attributes.sex} --
            {item.attributes.address}
            <button onClick={() => delHandler(item.id)}>删除</button>
            <button onClick={() => getStudentById(item.id)}>修改</button>
            {delSuccess && '删除成功'}
          </p>
        )
      }
    </div>
  )
}
